<template>
  <div>
    <!-- 1.0 顶部搜索框 -->
    <div class="search">
      <!-- 返回箭头 -->
      <i
        @click="backHandle"
        class="iconfont iconjiantou2"
      ></i>
      <div class="search_in">
        <i class="iconfont iconsearch"></i>
        <!-- @keyup.enter 按键修饰符 -->
        <input
          class="search_input"
          type="text"
          placeholder="请输入搜索内容..."
          v-model="keyword"
          @keyup.enter="searchHandle"
          ref="search_input_dom"
        >
      </div>
      <span
        class="search_btn"
        @click="searchHandle"
      >搜索</span>
    </div>
    <!-- 2.0 搜索历史 -->
    <div
      class="history"
      v-show="history.length"
    >
      <h3 class="title">
        <span>历史记录</span>
        <span
          class="clear_history"
          @click="clearHistoryHandle"
        >清除记录</span>
      </h3>
      <ul class="list">
        <li
          v-for="(item,index) in history"
          :key="index"
          class="item"
          @click="historySearchHandle(item)"
        >{{ item }}</li>
      </ul>
    </div>
    <!-- 3.0 热门搜索 -->
    <div class="hot">
      <h3 class="title">热门搜索</h3>
      <ul class="list">
        <li class="item">美女1</li>
        <li class="item">美女2</li>
        <li class="item">美女3</li>
        <li class="item">美女4</li>
      </ul>
    </div>
    <!-- 4.0 搜索提示 -->
    <ul
      class="tips"
      v-show="isShowTips"
    >
      <li
        class="tips_item"
        v-for="item in list"
        :key="item.id"
        @click="$router.push(`/detail/${item.id}`)"
      >
        <span class="tips_title">{{ item.title }}</span>
        <i class="iconfont iconjiantou1"></i>
      </li>
    </ul>
  </div>
</template>

<script>
// 导入搜索接口
import { getPostSearch } from "@/api";
import { setHistory, getHistory, removeHistory } from "@/utils/local";
export default {
  data() {
    return {
      isShowTips: false,
      // 搜索关键字
      keyword: "",
      // 搜索结果列表
      list: [],
      history: [],
    };
  },
  // 监听变量
  watch: {
    // 监听关键词的变化
    keyword(val) {
      // 如果为空，关闭提示盒子
      if (val === "") {
        this.isShowTips = false;
      }
    },
    // 监听搜索历史记录变量，用于同步更新本地存储
    history(val) {
      setHistory(val);
    },
  },
  //    生命周期          人出生 ， 死亡
  //    生命周期函数      人出生的时候自动执行的一个函数（钩子函数）
  // created      创建组件的时候触发 -  特点：DOM 结构还没开始渲染
  // mounted      组件安装好时候触发 -  特点：DOM 结构已经初步渲染完毕了。
  mounted() {
    // console.log(this.$refs.search_input_dom);
    // 进入到搜索页的时候输入框获取焦点
    this.$refs.search_input_dom.focus();
    // 获取历史记录
    this.history = getHistory();
  },
  methods: {
    // 点击搜索按钮触发事件
    searchHandle() {
      // 如果搜索关键词为空，给用户提示
      if (this.keyword === "") {
        return this.$toast("请输入内容哦...");
      }
      // 调用搜索接口
      getPostSearch({
        // 把输入框的 keyword 传递过来
        keyword: this.keyword,
        pageSize: 5,
      }).then((res) => {
        // 把搜索结果数据绑定到 data 中
        this.list = res.data.data;
        // 显示搜索提示盒子
        this.isShowTips = true;
        // data 操作，影响视图变化，数据前添加
        this.history.unshift(this.keyword);
        // 数组去重有很多：indexOf   findIndex  includes   ...
        // ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。(去重)
        // ... 展开运算符，可以把对象或者数组展开成逗号分隔的数据
        this.history = [...new Set(this.history)];
        // 本地存储操作，把结果存储到浏览器，否则刷新就没有了
        // setHistory(this.history);   // 被 watch 取代了
      });
    },
    // 点击返回按钮
    //    1. 清空输入框的内容功能
    //    2. 返回功能
    backHandle() {
      // 如果有搜索关键词，清空搜索关键词
      if (this.keyword) {
        this.keyword = "";
      } else {
        // 没有搜索关键词实现返回
        this.$router.back();
      }
    },
    // 清空历史记录
    clearHistoryHandle() {
      // 1. 清空 data 的数据，更新视图
      this.history = [];
      // 2. 清空 本地存储数据，下次进来就没有了
      // removeHistory(); // 被 watch 取代了
    },
    // 点击历史记录重新搜索
    historySearchHandle(keyword) {
      // 把关键词更新到 data 中
      this.keyword = keyword;
      // 根据新关键词发送请求
      this.searchHandle();
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 44px;
  .iconjiantou2 {
    font-size: 16px;
  }
  .search_in {
    flex: 1;
    margin: 0 10px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #ddd;
    height: 34px;
    border-radius: 50px;
    .iconsearch {
      position: absolute;
      color: #999;
    }
    .search_input {
      padding-left: 25px;
      border: none;
      // 清除掉部分手机，部分浏览器获取焦点的时候会出现投影
      outline: none;
    }
  }
}

.history,
.hot {
  margin: 10px;
}
.history {
  border-bottom: 1px solid #ddd;
}
.title {
  font-size: 15px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .clear_history {
    font-size: 12px;
    color: #999;
    font-weight: normal;
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  .item {
    font-size: 13px;
    padding: 5px 10px;
  }
}
.tips {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 0;
  background-color: #fff;
  .tips_item {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin: 10px;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    .tips_title {
      font-size: 15px;
    }

    .iconjiantou1 {
      color: #999;
    }
  }
}
</style>